import React from 'react'
import '../assets/css/botplay.css'
import '../assets/iconfont/musicControls/iconfont.css'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

class Playlist extends React.Component {
    handleclick(e) {
        if (e.target.className === 'Playlist-container') {
            this.props.changeShowplaylist(!this.props.showplaylist)
        }
    }
    //切歌
    handlepullid(index,id) {
        this.props.getNowMusicindex(index)
        this.props.playOrPause(true)
        this.props.clearTimenow()
        this.props.getMusicURLApi(id)
         //清除以播放的时长
         this.props.clearTimenow()
    }
    handleChangecycle(){
        if(this.props.cycle === 'list'){
            //重列表循环改为单曲
            this.props.changeCycle('only')
        }else if(this.props.cycle === 'only'){
            //从单曲变为随机
            this.props.changeCycle('random')
        }else{
            //随机=>列表
            this.props.changeCycle('list')
        }
    }
    render() {
        if (this.props.showplaylist) {
            let button = <div></div>
            let button1 =  <div><span className={'iconfont icon--lbxh'}> 列表循环</span>({this.props.playmusiclist.length})</div>
            let button2 =  <div><span className={'iconfont icon-danquxunhuan'}> 单曲循环</span>({this.props.playmusiclist.length})</div>
            let button3 =  <div><span className={'iconfont icon-suijibofang'}> 随机播放</span>({this.props.playmusiclist.length})</div>
            if(this.props.cycle === 'list'){
                button = button1
            }else if(this.props.cycle === 'only'){
                button = button2
            }else{
                button = button3
            }
            return (

                <div className='Playlist-container' onClick={this.handleclick.bind(this)}>
                    <div className='Playlist-list'>
                        <div className='play_list_top' onClick={this.handleChangecycle.bind(this)}>
                            {button}
                        </div>
                        <div className='playlist'>
                            <ul>
                                {this.props.playmusiclist.map((item, index) => {
                                    let srcid = 'musicid=' + item.id
                                    let style = 'play_list_title'
                                    let style1 = 'play_list_singer'
                                    if (index === this.props.listmusicindex) {
                                        style = 'active play_list_title'
                                        style1 = 'active play_list_singer'
                                    }
                                    return (
                                        <div to={srcid} key={item.id} onClick={this.handlepullid.bind(this, index,item.id)}>
                                            <li className='play_list_li'>
                                                <span className={style}>{item.name}</span>
                                                {item.ar.map(val => {
                                                    return (
                                                        <span key={val.id} className={style1}>-{val.name}/</span>
                                                    )
                                                })}
                                            </li>
                                        </div>
                                    )
                                })}
                                <div style={{height:'130px'}}></div>
                            </ul>
                        </div>
                    </div>
                </div>
            )
        } else {
            return (
                null
            )
        }
    }
}
export default Playlist;